<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03_计算属性和监视</title>
  </head>
  <body>
    <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
    -->
    <div id="app">
      姓:
      <input type="text" placeholder="First Name" :value="firstName" /><br />
      名: <input type="text" placeholder="Last Name" :value="lastName" /><br />
      姓名1:
      <input type="text" placeholder="Full Name1" :value="fullName1" /><br />
      姓名2:
      <input type="text" placeholder="Full Name2" :value="fullName2" /><br />
      <input type="text" placeholder="Full Name2" :value="fullName2" /><br />
      <input type="text" placeholder="Full Name2" :value="fullName2" /><br />

      <p>{{count}}</p>
      <button @click="update">按钮</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          // data定义的属性在实例对象上（数据代理）
          firstName: "李",
          lastName: "沛华",
          count: 1,
        },
        methods: {
          update() {
            // 更新fullName2的值，此时会触发fullName2的set方法
            // this.fullName2 = "闫-海静";
            this.count++;
            // this.count = 2;
          },
        },
        // 计算属性
        // 特点：有缓存，当计算属性里面依赖的数据没有发生变化，就不会重新计算
        // 只有里面依赖的数据有一个发生变化，就会重新计算，更新页面
        computed: {
          // 只读的计算属性
          // 定义属性的读取的方法
          fullName1() {
            return this.firstName + "-" + this.lastName;
          },
          // 可读可写的计算属性
          fullName2: {
            // 读取fullName2属性时会调用get方法，get方法的返回值就是fullName2的值
            get() {
              // console.log(111);
              return this.firstName + "-" + this.lastName;
            },
            // 修改fullName2属性的值时，会调用set方法，set方法来指示怎么修改
            set(val) {
              const [firstName, lastName] = val.split("-");
              // vue中只要更新数据，用户界面会自动发生变化
              this.firstName = firstName;
              this.lastName = lastName;
            },
          },
        },
        // 监视属性
        // 监视一个已存在的属性，一旦这个属性值发生变化，就会触发监视的回调函数
        watch: {
          // 监视count属性
          // 一旦count属性发生变化就会触发这个函数
          // 第一次渲染是不会触发的
          // count(newVal, oldVal) {
          //   // newVal 新的值(最新的值)
          //   // oldVal 旧的值（上次的值）
          //   console.log(newVal, oldVal);
          // },
          count: {
            handler(newVal, oldVal) {
              console.log(newVal, oldVal);
            },
            immediate: true, // 第一次就触发
          },
        },
      });
    </script>
  </body>
</html>
